<template>
<!-- 内容区 -->
<div class="ZTcontent">

    <!-- <div class="title">
            <span>丨</span>
            <span>项目管理</span>
        </div> -->
    <div class="proContent">
        <div class="projectList" v-for="(item,index) in projectList" :key="index">
            <div class="pro_ground">

            </div>
            <div class=pro_area>
                <span>{{item.proRegion}}</span>
            </div>
            <div class="pro_type">
                <span>{{item.proType}}</span>
            </div>
            <div class="pro_name">
                <span>{{item.proName}}</span>
            </div>
            <div class="pro_import">
                <div class="imp" @click="showImport(item)">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <!-- <el-tag class="chezai" effect="dark">{{item.proType}}</el-tag>
                <el-tag class="diqu">{{item.proRegion}}</el-tag>
                <div class="neirong">{{item.proName}}</div>
                <el-button icon="el-icon-more" class="an"></el-button>
                <button class="daoru" @click="showImport(item)">导入安装信息</button> -->
        </div>
        <div class="project_adder">
            <div class="add" @click="hide()"></div>
        </div>
    </div>
    <transition name="el-fade-in-linear">
        <div class='projectInfo_add' v-show="isopen" ref="project_add">
            <el-form label-position="right" :rules="insertRule" label-width="93px" :model="inseartProjectInfo" ref="inseartProjectInfo">
                <div class="insert_header">
                    <div>新增项目</div>
                </div>
                <div class="formItem">
                    <!-- <el-form-item label="项目ID">
                        <el-input v-model="inseartProjectInfo.pid" placeholder="请输入">
                        </el-input>
                    </el-form-item> -->
                    <el-form-item label="项目名称" prop="proName">
                        <el-input v-model="inseartProjectInfo.proName" placeholder="请输入">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="所在城市" prop="proRegion">
                        <el-cascader v-model="inseartProjectInfo.proRegion" :options="area"></el-cascader>
                    </el-form-item>
                    <el-form-item label="项目类型" prop="proType">
                        <el-select v-model="inseartProjectInfo.proType" placeholder="请选择" @change="proTypeChange">
                            <el-option v-for="item in projectType" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <div v-show="CompanyTagShow">
                        <el-form-item label="车辆公司" prop="busCompany">
                            <el-tag :key="tag" v-for="tag in inseartProjectInfo.busCompany" closable :disable-transitions="false" @close="CompanyTagDelete(tag)">
                                {{tag}}
                            </el-tag>
                            <el-input class="input-new-tag" v-if="inputVisible" v-model="newComanyTag" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
                            </el-input>
                            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加新车辆公司</el-button>
                        </el-form-item>
                    </div>

                </div>

            </el-form>
            <div class="projectInfo_add_button">
                <button class="add_cancel" @click="projectInsertCancel('inseartProjectInfo')">取消</button>
                <button class="add_confirm" @click="projectInsertConfirm('inseartProjectInfo')">确定</button>
            </div>
        </div>
    </transition>
    <transition name="el-fade-in-linear">
        <div class="piliang" v-show="isopen_pl">
            <div>
                <span>导入安装信息</span>
                <span @click="hide_pl()"></span>
            </div>
            <div>
                <div class="plneicheng">
                    <span></span>
                    <div class="ssxm">
                        <span style="color:#F9243D">*</span><span>所属项目</span>
                        <el-input placeholder="请输入内容" v-model="clickProject.proName" :disabled="true">
                        </el-input>
                        <button @click="downloadTemplate">下载模板</button>
                    </div>
                    <el-upload ref="upload" class="upload-demo" drag action="" :http-request="uploadFile" :on-change="upchange" :before-upload="beforeAvatarUpload" list-type="text" :file-list="fileList" :auto-upload="false" multiple>
                        <div class="upload-text">
                            <i class="el-icon-upload"></i>
                            <div class="el-upload-text-b">将文件拖到此处，或点击上传</div>
                            <div class="el-upload-text">支持上传xsl/xlsx格式的Excel文件</div>
                        </div>
                    </el-upload>

                </div>
            </div>
            <button class="cancel" @click="hide_pl">取消</button>
            <button class="confirm" @click="submitUpload">确定</button>
        </div>
    </transition>
</div>
</template>

<script>
import AreaDivision from "../../static/area.js";
export default {
    data() {
        return {
            xmlb: [{
                    value: 1,
                    label: "字典"
                },
                {
                    value: 2,
                    label: "车载"
                },
                {
                    value: 3,
                    label: "安检门"
                },
            ],
            szcs: [{
                value: 1,
                label: " "
            }, ],
            projectList: [{
                proType: "车载",
                proRegion: "山东/济南",
                proName: "济南公交车项目",

            }],
            fileList: [],
            isopen_pl: false,
            clickProject: "",
            xmlbVal: "",
            szcsVal: "",
            xmmcVal: "",
            isopen: false,
            isshow: false,
            area: AreaDivision.arrAll,
            valueArea: "",
            inseartProjectInfo: {
                pid: "",
                proName: "",
                proRegion: "",
                vehicleCompany: "",
                proType: "",
                busCompany: [

                ],
            },
            insertRule: {
                proName: [{
                    required: true,
                    message: '请输入项目名称',
                    trigger: 'blur'
                }],
                proRegion: [{
                    required: true,
                    message: '请选择区域',
                    trigger: 'change'
                }],
                proType: [{
                    required: true,
                    message: '请选择车辆类型',
                    trigger: 'change'
                }],
                busCompany: [{
                    required: true,
                    message: '请添加车辆公司',
                    trigger: 'blur'
                }]
            },
            projectType: [{
                    label: "车载",
                    value: "车载",
                },
                {
                    label: "安检门",
                    value: "安检门"
                }
            ],

            newComanyTag: "",
            CompanyTagShow: false,
            inputVisible: false
        }
    },
    created() {
        this.getProjectList();
    },
    methods: {
        proTypeChange(proType) {
            let _this = this;
            if (proType == "车载") {
                _this.CompanyTagShow = true;
                _this.$refs.project_add.style.height = "380px";
            } else {
                _this.CompanyTagShow = false;
                _this.busCompany = [];
                _this.$refs.project_add.style.height = "300px";
            }
        },
        CompanyTagDelete(tag) {
            this.inseartProjectInfo.busCompany.splice(this.inseartProjectInfo.busCompany.indexOf(tag), 1);
        },
        handleInputConfirm() {
            let _this = this;
            let inputValue = this.newComanyTag;
            if (inputValue) {

                this.inseartProjectInfo.busCompany.push(inputValue);
                _this.newComanyTag = "";
            }
            this.inputVisible = false;
            this.inputValue = '';
        },
        showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        projectInsertConfirm(formName) {
            let _this = this;
            _this.inseartProjectInfo.pid = _this.generateUUID();
            _this.$refs[formName].validate((valid) => {
                if (valid) {
                    _this.$axios.post("/project/add", {
                        "pid": _this.inseartProjectInfo.pid,
                        "proName": _this.inseartProjectInfo.proName,
                        "provinceCode": _this.inseartProjectInfo.proRegion[0],
                        "cityCode": _this.inseartProjectInfo.proRegion.length == 2 ? _this.inseartProjectInfo.proRegion[1] : _this.inseartProjectInfo.proRegion[0],
                        "proType": _this.inseartProjectInfo.proType
                    }).then((res) => {
                        let code = res.data.code;
                        if (code == 2) {
                            _this.inseartProjectInfo.busCompany.forEach((company) => {
                                _this.$axios.post("project/company", {
                                    companyName: company,
                                    proId: _this.inseartProjectInfo.pid
                                }).then((res) => {
                                    let code = res.data.code;
                                    if (code == 3) {
                                        _this.$message.error(res.data.msg);
                                        return;
                                    }
                                }).catch((e) => {
                                    console.log(e);
                                })
                            })
                            _this.$message({
                                message: "新建项目成功",
                                type: 'success'
                            });
                            _this.isopen = false;
                            _this.getProjectList();
                        } else if (code == 3) {
                            _this.$message.error(res.data.msg);
                        }
                    }).catch()
                } else {
                    return false;
                }
            })

        },
        generateUUID() {
            var d = new Date().getTime();
            if (window.performance && typeof window.performance.now === "function") {
                d += performance.now(); //use high-precision timer if available
            }
            var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                var r = (d + Math.random() * 16) % 16 | 0;
                d = Math.floor(d / 16);
                return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
            });
            return uuid;
        },
        projectInsertCancel(formName) {
            let _this = this;
            _this.isopen = false;
            _this.$refs[formName].resetFields();
        },

        showImport(project) {
            let _this = this;
            _this.clickProject = project;
            _this.isopen_pl = true;
        },
        downloadTemplate() {
            // let _this = this;
            // _this.$axios({
            //         url: "/project/download",
            //         responseType: 'blob',
            //         method: 'get'
            //     })
            //     .then((res) => {
            //         const filename = res.headers["content-disposition"];
            //         const blob = new Blob([res.data]);
            //         var downloadElement = document.createElement("a");
            //         var href = window.URL.createObjectURL(blob);
            //         downloadElement.href = href;
            //         downloadElement.download = decodeURIComponent("关联信息模板.xlsx");
            //         document.body.appendChild(downloadElement);
            //         downloadElement.click();
            //         document.body.removeChild(downloadElement);
            //         window.URL.revokeObjectURL(href);
            //     }).catch((e) => {
            //         console.log("下载失败");
            //     })
            let _this = this;
            _this.$axios({
                    url: "/project/download",
                    responseType: 'blob',
                    method: 'get'
                })
                .then((res) => {
                    const filename = res.headers["content-disposition"];
                    const blob = new Blob([res.data]);
                    var downloadElement = document.createElement("a");
                    var href = window.URL.createObjectURL(blob);
                    downloadElement.href = href;
                    // downloadElement.download = decodeURIComponent(filename.split("filename=")[1]);
                    downloadElement.download = decodeURIComponent("关联信息模板.xlsx");
                    document.body.appendChild(downloadElement);
                    downloadElement.click();
                    document.body.removeChild(downloadElement);
                    window.URL.revokeObjectURL(href);
                }).catch((e) => {
                    console.log("下载失败");
                })
        },
        uploadFile(params) {
            let _this = this;
            let fd = new FormData();
            fd.append('file', params.file);
            fd.append('proId', _this.clickProject.proId)
            _this.$axios.post("project/import", fd).then((res) => {
                let code = res.data.code;
                if (code == 3) {
                    _this.$message.error(res.data.msg)
                } else if (code == 2) {
                    _this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    
                }
                //关闭弹窗  刷新页面数据  清除批量导入数据
                 _this.isopen_pl =false;
                 _this.fileList = [];
            }).catch()
            
        },
        // 文件上传禁用
        changedisable() {
            this.changedis = false;
        },
        submitUpload() {
            let _this = this;
            _this.$refs.upload.submit();
        },
        // 批量导入自定义样式
        upchange(file, filelist) {
            var xiaoshi = document.querySelector('.el-upload-dragger');
            xiaoshi.style.height = "50px";
            var xiaoshitextb = document.querySelector('.el-upload-text-b');
            xiaoshitextb.innerHTML = "上传文件";
            var xiaoshitext = document.querySelector('.el-upload-text');
            xiaoshitext.style.display = 'none';
            var xiaoshiicon = document.querySelector('.el-icon-upload');
            xiaoshiicon.style.position = 'relative';
            xiaoshiicon.style.right = '60px';
            xiaoshiicon.style.top = '22px';
            var textlist = document.querySelector('.el-upload-list');
            textlist.style.border = '3px solid rgba(226,226,226)';
            textlist.style.borderRadius = '5px';
            textlist.style.height = '150px';
            textlist.style.background = 'rgb(249,249,249)';
            var cancel = document.querySelector('.cancel');
            cancel.style.display = "block"
            var confirm = document.querySelector('.confirm');
            confirm.style.display = "block"
        },
        beforeAvatarUpload(file) {
            const isText = file.type === 'application/vnd.ms-excel';
            const isTextComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
            if (!isText && !isTextComputer) {
                this.$message.warning('请上传excel格式文件！');
            };
            return (isText || isTextComputer);
        },
        hide_pl() {
            let _this = this;
            _this.fileList = [];
            _this.isopen_pl = !_this.isopen_pl;
        },
        getProjectList() {
            let _this = this;
            _this.$axios
                .get("/project/getAll")
                .then((res) => {
                    _this.projectList = [];
                    res.data.data.forEach((pro) => {
                        _this.projectList.push({
                            proId: pro.proId,
                            proType: pro.proType,
                            proName: pro.proName,
                            proRegion: pro.province + "/" + pro.city,
                        });
                    });
                })
                .catch();
        },

        test(item) {
            let _this = this;
            if (item.label === '车载') {
                _this.isshow = true;
            } else {
                _this.isshow = false;
            }
        },
        hide() {
            let _this = this;
            _this.isopen = !_this.isopen;
        },
    }
}
</script>

<style scoped>
.ZTcontent span:nth-child(2) {
    color: #3C74E3
}

.title {
    margin-top: 10px;
}

.title span {
    color: #3C74E3
}

/* 内容区底部样式 */
.goPage>button:hover {
    cursor: pointer;
}

.goPage>button {
    width: 60px;
    height: 30px;
    background: #3C74E3;
    border-radius: 4px;
    border: none;
    color: #FFFFFF;
}

.goPage>span:nth-of-type(2) {
    padding-left: 48px;
    padding-right: 8px;
}

.goPage>span:nth-of-type(1) {
    padding-right: 8px;
}

.ZTfooter>.goPage {
    position: absolute;
    right: 10px;
    top: 10px;
}

.goPage>>>.el-input {
    width: 0 !important;
}

.goPage>.el-input>>>.el-input__inner {
    width: 40px !important;
    height: 30px !important;
    padding: 0 5px !important;
}

.el-pagination {
    position: absolute;
    right: 190px;
    top: 10px;
}

.ZTfooter>.el-select>>>.el-input__icon {
    line-height: 30px !important;
}

.ZTfooter>.el-select>>>.el-input__inner {
    width: 100px;
    height: 30px;
}

.ZTfooter>span:nth-of-type(1) {
    margin-right: 16px;
}

.ZTfooter {
    height: 44px;
    display: flex;
    align-items: center;
    border-top: 1px solid #CCCCCC;
    box-sizing: border-box;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
    padding: 0 16px;
    margin-top: 4px;
    position: relative;
}

/* 滚动条样式 */
.ZT_table::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 6px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.ZT_table::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background: #3C74E3;
}

.ZT_table::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #f5f5f5;
}

/* 设备状态表列 */
.ZT_table {
    width: 100%;
    height: calc(100% - 102px);
    overflow-y: scroll;
    background-color: #fff;
}

.ZT_row>span:hover {
    cursor: pointer;
    color: #3C74E3;
}

.ZT_row>span {
    display: inline-block;
    box-sizing: border-box;
    padding-left: 16px;
}

.ZT_row {
    height: 40px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    display: flex;
    align-items: center;
}

.ZT_bg {
    background: #F5F5F5;
}

.ZT_row>span:nth-child(1) {
    width: 45px;
}

.ZT_row>span:nth-child(2),
.ZT_row>span:nth-child(3),
.ZT_row>span:nth-child(4),
.ZT_row>span:nth-child(5),
.ZT_row>span:nth-child(6),
.ZT_row>span:nth-child(7) {
    width: 213px;
}

.ZT_row>span:nth-child(8) {
    width: 219px;
}

.ZT_row>span:nth-child(9) {
    width: 48px;
    padding-left: 16px;
    color: #3C74E3;
    cursor: pointer;
}

.online {
    background: url(/static/img/online.png) no-repeat;
    background-size: 15px;
    color: #16A951;
    background-position: 12px 3px;
}

.offline {
    background: url(/static/img/off-line.png) no-repeat;
    background-size: 15px;
    background-position: 12px 3px;
}

/* 设备状态表头 */
.ZT_title>span:nth-child(1) {
    width: 47px;
    border: none !important;
    text-align: center;
    padding: 0 !important;
}

.ZT_title>span:nth-child(2),
.ZT_title>span:nth-child(3),
.ZT_title>span:nth-child(4),
.ZT_title>span:nth-child(5),
.ZT_title>span:nth-child(6),
.ZT_title>span:nth-child(7) {
    width: 213px;
}

.ZT_title>span:nth-child(8) {
    width: 219px;
}

.ZT_title>span:nth-child(9) {
    width: 120px;
}

.ZT_title>span {
    display: inline-block;
    height: 32px;
    line-height: 32px;
    border-left: 1px solid #CCCCCC;
    padding-left: 14px;
    box-sizing: border-box;
}

.ZT_title {
    height: 48px;
    background: #EBF1FC;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 600;
    color: #333333;
    display: flex;
    align-items: center;
}

/* 设备状态表格 */
.ZTcontent {
    height: calc(100% - 56px);
    background-color: #fff;
    margin-top: 8px;
    /* padding: 16px 16px 0 16px; */
    box-sizing: border-box;
    position: relative;
}

/* 输入搜索框 */
.el-select>>>.el-input__icon {
    line-height: 36px !important;
}

.el-select>>>.el-input__inner,
.el-input>>>.el-input__inner {
    width: 200px;
    height: 36px;
    border: 1px solid #DDDDDD;
    border-radius: 4px;
    padding-left: 8px;
    box-sizing: border-box;
}

.zt {
    height: calc(100% - 53px);
}

.proContent {
    height: calc(100% - 2px);
    background-color: #fff;

    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
    padding-top: 24px;
}

/* 项目 */
.projectList {
    position: relative;
    margin: 16px 0 0 16px;
    display: flex;
    border: 1px;
    /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2) !important; */
    /* border-radius: 4px; */
    width: 264px;
    height: 132px;
    font-family: "PingFang SC";
    background-color: rgba(244, 244, 245, 0.1);
    font-size: 14px;
    font-family: PingFang SC !important;
}

.pro_ground {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 92px;
    background-color: #2B6FD9;
    border-radius: 8px;
}

.pro_area {
    z-index: 1;
    position: absolute;
    left: 19px;
    top: 8px;
    width: 237px;
    height: 80px;
    background-color: #C5DCFF;
    box-shadow: 0px 3px 6px #0E408E;
    border-radius: 8px;
}

.pro_area span {
    position: absolute;
    right: 8px;
    top: 4px;
    text-align: right;
    color: #296CD7;
}

.pro_type {
    z-index: 2;
    position: absolute;
    left: 8px;
    top: 8px;
    width: 160px;
    height: 80px;
    background-color: #C5DCFF;
    box-shadow: 0px 3px 6px rgba(14, 64, 142, 0.6);
    border-radius: 8px;
}

.pro_type span {
    position: absolute;
    left: 8px;
    top: 4px;
    text-align: left;
    color: #2B6FD9;
    font-weight: 400;
}

.pro_name {
    z-index: 3;
    position: absolute;
    top: 36px;
    width: 100%;
    height: 96px;
    background-color: #5692EE;
    border-radius: 8px;
}

.pro_name span {
    position: absolute;
    left: 16px;
    top: 16px;
    text-align: center;
    color: #FFFFFF;
    font-weight: 400;
}

.pro_import {
    z-index: 4;
    position: absolute;
    right: 0px;
    bottom: 16px;
    border-radius: 13px 0 0 13px;
    width: 78px;
    height: 26px;
    background-color: #63A0FE;
    box-shadow: 0px 0px 6px rgba(14, 64, 142, 0.2);
    /* border-radius: 8px; */
}

.pro_import .imp {
    position: relative;
    left: 16px;
    width: 30px;
    cursor: pointer;
}

.pro_import .imp div {
    position: relative;
    display: inline-block;
    width: 4px;
    height: 4px;
    margin-right: 2px;
    border-radius: 50%;
    /* border: 1px solid white; */
    background-color: white;
}

.project_adder {
    position: relative;
    margin: 16px 0 0 16px;
    display: flex;

    border: 1px dashed #2664C4;
    /* border-radius: 4px; */
    width: 132px;
    height: 132px;

}

/* 表单 */
.xinzeng {
    border: 1px solid #000;
    border-radius: 4px;
    width: 200px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 180px;
    left: 500px;
}

.add {
    background: url(/static/img/add.png);
    position: relative;
    left: 42px;
    top: 42px;
    width: 49px;
    height: 49px;
    cursor: pointer;
}

/* 批量管理 */
.piliang {
    z-index: 999;
    position: fixed;
    top: 200px;
    left: 800px;
    width: 392px;
    height: 420px;
    border: #f5f5f5 solid 1px;
    border-radius: 10px;
    box-sizing: border-box;
    background-color: #ffffff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5)
}

.piliang>>>.el-input {
    display: inline;
}

.piliang>>>.cancel {
    position: absolute;
    width: 80px;
    height: 36px;
    background: white;
    border-radius: 4px;
    border-width: 1px;
    border-color: #3c74e3;
    /* border: none; */
    color: #3C74E3;
    font-size: 14px;
    right: 116px;
    bottom: 20px;
    display: none;
}

.piliang>>>.confirm {
    position: absolute;
    width: 80px;
    height: 36px;
    background: #3c74e3;
    border-radius: 4px;
    border: none;
    color: #ffffff;
    font-size: 14px;
    right: 20px;
    bottom: 20px;
    display: none;
}

/deep/ .el-upload-dragger {
    top: -10px;
    width: 352px;
    height: 287px;
}

/deep/ .upload-text {
    position: relative;
    top: calc(50% - 40px);
    left: calc(50% - 141px);
    height: 80px;
    width: 282px;
}

/deep/ .el-upload-text-b,
/deep/ .el-icon-upload {
    color: #3C74E3 !important;
}

/deep/ .el-icon-upload {
    line-height: 32px !important;
    margin: 0px !important;
    font-size: 32px !important;
}

/deep/ .el-upload-text-b {
    top: 8px;
    font-size: 14px !important;
    font-family: "PingFang SC";
}

/deep/ .el-upload-text {
    font-size: 12px !important;
    color: rgba(0, 0, 0, 0.4);
}

/deep/ .el-form-item__label:before {
    margin: 0 !important;
    color: #F9243D !important;
}

/deep/ .el-form-item__error {
    color: #F9243D;
    font-size: 6px;
    line-height: 0.1;
    padding-top: 4px;
    position: absolute;
    top: 100%;
    left: 0;
}

/* 上传文件后的列表格式 */
.upload-demo /deep/ .el-upload-list__item {
    font-size: 22px;
    background: rgb(249, 249, 249);
    border-bottom: 3px solid rgba(226, 226, 226);
    position: relative;
    top: -10px;
}

.piliang:hover {
    display: block;
}

.piliang>div:nth-child(1) {
    height: 48px;
    font-size: 16px;
    padding-left: 20px;
    font-family: "PingFang SC";
    font-weight: 600;
    color: rgba(0, 0, 0, 0.88);
    line-height: 48px;
    align-items: center;
    background-color: #f5f5f5;
}

.piliang>div:nth-child(1)>span:nth-child(2) {
    position: absolute;
    background: url(/static/img/close.png) no-repeat;
    width: 16px;
    height: 16px;
    right: 20px;
    top: 18px;
    cursor: pointer;
}

.piliang>div>span:nth-child(2) {
    background: url(/static/img/piliang.png) no-repeat;
    background-size: 32px 23.97px;
    background-position: 32px 32px;
}

.plneicheng {
    margin: 20px;
    width: 352px;
    height: 282px;
    /* border: #dddddd dashed 1px; */
    position: relative;
}

.ssxm {
    margin-bottom: 20px;
}

.ssxm button {
    text-align: center;
    position: relative;
    left: 8px;
    width: 64px;
    height: 32px;
    color: #FFFFFF;
    border: 1px solid #3C74E3;
    border-radius: 4px;
    background-color: #3C74E3;
}

/* 新增项目 */
.projectInfo_add {
    z-index: 999;
    width: 622px;
    height: 300px;
    position: absolute;
    background-color: white;
    top: 25%;
    left: 35%;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5) !important;
    transition: all .3s ease-in-out;
}

.insert_header {
    height: 48px;
    background-color: #F5F5F5;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    align-items: center;
    display: flex;
    margin-bottom: 20px;
}

.insert_header div {
    position: relative;
    font-size: 16px;
    left: 20px;
    color: #303133;
    font-weight: 700;
}

.projectInfo_add .formItem {
    width: 100%;
    position: relative;
    left: 13px;
}

.projectInfo_add>>>.el-form-item__label {
    font-weight: 400;
    color: #666666;
    padding-right: 8px;
    height: 36px;
}

.projectInfo_add>>>.el-form-item {
    margin: 0 0 16px 0 !important;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 14px;
    height: 36px;
}

.form-item-project .el-select {
    width: auto;
}

.form-item-project .el-input {
    width: auto;
}

.projectInfo_add .formItem>>>.el-input__inner,
.projectInfo_add .formItem>>>.el-textarea__inner {
    width: 478px !important;
    height: 36px !important;
}

.projectInfo_add .formItem>>>.el-cascader {
    width: auto !important;
}

.projectInfo_add .formItem>>>.el-cascader .el-input__inner {
    width: 478px !important;
}

.add_cancel {
    text-align: center;
    width: 80px;
    height: 36px;
    color: #3C74E3;
    border: 1px solid #3C74E3;
    border-radius: 4px;
    background-color: #FFFFFF;
    position: absolute;
    bottom: 20px;
    right: 136px;
}

.add_confirm {
    text-align: center;
    width: 80px;
    height: 36px;
    color: #FFFFFF;
    border: 1px solid #3C74E3;
    border-radius: 4px;
    background-color: #3C74E3;
    position: absolute;
    bottom: 20px;
    right: 40px;
}

.projectInfo_add_button {
    margin-top: 20px;
    justify-content: space-around;
    display: flex;
    align-items: center;
}

.quxiao {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 20px;
    right: 16px;
    background: url(/static/img/close_b.png) no-repeat;
    background-size: 16px;
    cursor: pointer;
}

button {
    cursor: pointer;
}
</style>
